import React, { Component, Suspense } from 'react';
import { connect } from 'dva';
import GridContent from '@/components/PageHeaderWrapper/GridContent';
import { FormattedMessage } from 'umi-plugin-react/locale';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import PageLoading from '@/components/PageLoading';
import { Card, Button, Icon, Modal, message, Form, Input, Checkbox, Col, Row,Tag,Select  } from 'antd';
import styles from '../SlotCheck/index.less';
import savebuttom from '@/assets/account/robotSetup/savebuttom.png';

const RuleItem = React.lazy(() => import('./ruleItem'));
const { Option } = Select;

const formItemLayout = {
  labelCol: { span: 1 },
  wrapperCol: { span: 20 },
};

@connect(({ collectSlot, loading }) => ({
  collectSlot,
  loading: loading.effects['collectSlot/fetchSlot'],
}))
class SlotRules extends Component {
  constructor(props) {
    super(props);
    this.state = {
      dialogSlots: [],
      slotLoading: true, // 词槽加载loading
      nodeId: props.nodeId,
      stage: props.stage,
      dialogId: props.dialogId,// 多轮对话id
      slot:[],
      inquires:[],
      dicts:[]
    }
  }

  componentDidMount() {
    this.fetchSlot();
    this.getDialogInquire();
    this.getAllDict();
  }

  fetchSlot=()=>{
    const { dispatch } = this.props;
    const { dialogId,nodeId,stage} = this.state;
    let {slot,dialogSlots} = this.state;
    dispatch({
      type: 'collectSlot/fetchSlot',
      payload: {
        dialogId,nodeId,stage,
        field:'slot'
      },
      callback:(res)=>{
        if(res.code === 0 && res.code != undefined){
            return false;
        };
        slot = res.dialogStage.slot ;
        dialogSlots = res.dialogSlots;
        if(!slot){
          slot=[]
        }
        if(!dialogSlots){
            dialogSlots=[]
        }
        this.setState({
          dialogSlots:res.dialogSlots,
          slot
        })
      }
    });
  };

  getDialogInquire=()=>{
    const { dispatch } = this.props;
    const { dialogId,nodeId} = this.state;
    const {slot,dialogSlots} = this.state;
    dispatch({
      type: 'collectSlot/getInquire',
      payload: {
        dialogStageId:`${dialogId}-${nodeId}`,
      },
      callback:(res)=>{
        if(res.code === 0 && res.code != undefined){
            return false;
        }
        this.setState({
            inquires:res
        })
      }
    });
  };

  getAllDict=()=>{
    const { dispatch } = this.props;
    const { dialogId,nodeId} = this.state;
    const {slot,dialogSlots} = this.state;
    dispatch({
      type: 'collectSlot/getAllDict',
      payload: {
        dialogId,
      },
      callback:(res)=>{
        if(res.code === 0 && res.code != undefined){
            return false;
        }
       this.setState({
           dicts:res
       })
      }
    });
  };

  fixCaseArr=(arr)=>{
    let {slot} = this.state;
    slot = arr;
    this.setState({
      slot
    })
  };

  saveSlotCheck=()=>{
    const { dispatch,closeDrawer } = this.props;
    const { dialogId,nodeId,slot} = this.state;
    dispatch({
      type: 'collectSlot/saveSlot',
      payload: {
        field:'slot',
        _id:`${dialogId}-${nodeId}`,
        slot
      },
      callback:(res)=>{
        if(res.code && res.code !== undefined){
          return false;
        }
        message.info('保存成功');
        closeDrawer();
      }
    });
  };

  render() {
    const {dialogSlots,slot,inquires,dicts} = this.state;
    return (
      <GridContent>
        <Suspense fallback={<PageLoading />}>
          <Col>
            <RuleItem
              data={inquires}
              caseArr={slot}
              selected={dicts}
              dialogSlots={dialogSlots}
              upDateCase={(val)=>this.fixCaseArr(val)}
              upNewData={(val)=>this.fixCaseArr(val)}
            />
            {/*<Button type="primary" htmlType='button' onClick={()=>this.saveSlotCheck()} style={{marginTop:20}}>保存</Button>*/}
            <div className={styles.flexcen}>
              <img onClick={this.saveSlotCheck} src={savebuttom} />
            </div>
          </Col>
        </Suspense>
      </GridContent>
    );
  }
}

export default connect (({ user }) => ({
  currentUser: user.currentUser
}))(Form.create()(SlotRules));
